<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<view class="box1">
				<view class="name">
					{{info.hospital_name != null ? info.hospital_name : ''}}
				</view>
				<view class="bianhao-box">
					<view class="bianhao">
						NO：{{info.pre_number}}
					</view>
					<view class="time">
						<!-- 2021-08-20 -->
					</view>
				</view>

				<view class="list" v-if="info.is_emergency!=1">
					<view class="item">
						宠物名字： <text>{{info.petname}}</text>
					</view>
					<view class="item">
						种族： <text>{{['其他', '猫', '狗'][info.race] || info.race}}</text>
					</view>
					<view class="item">
						年龄： <text>{{info.age}}</text>
					</view>
					<view class="item">
						性别： <text>{{info.sex == 0 ? '母' : '公'}}</text>
					</view>
					<view class="item">
						体重： <text>{{info.weight}}kg</text>
					</view>
				</view>
			</view>

			<!-- <view class="line">

			</view> -->

			<view class="box2">
				<view class="title">
					诊断结果：<text>{{info.pets_result}}</text>
				</view>
				<view class="ti">
					<view> RP：</view>


				</view>

				<view class="yao-list">
					<view  v-for="(it,i) in yaoList" :key="i" @click.stop="xiangqing(it.drugs_id)">
						<view class="yao-item">
						
						<view class="left">
							<view class="name">
								
								{{it.drugs}}
								{{it.dr_model}}
							</view>
							<view class="yongliang">
								用法用量：{{it.explain}}
							</view>
							<view class="yongliang">
								备注：{{it.remarks}}
							</view>

						</view>
						<view class="right">
							*{{it.number}}
						</view>
                        </view>
						<view class="btn-box" v-if="revise==1" >
							<text class="shanchu" @click.stop="shanchu(it.drugs_id,index)">
								删除
							</text>
							<text class="bianji" @click.stop="bianji(it.drugs_id)">
								编辑
							</text>
						</view>
					</view>
				</view>
				
				<view class="add" v-if="revise==1"  @click="add">+ 添加</view>

				<!-- <image :src="info.img" style="width:300rpx;height:500rpx" class="" @click="fangda"></image> -->

				<view class="doctor-info" v-if="revise==0" >
					<view class="doctor-name">
						处方医生： <text>{{info.doctor_name}}</text>
					</view>
					<view class="time">
						开方日期：<text>{{info.start_time}}</text>
					</view>
					<!-- <view class="validity">
						开方有效期：<text>{{info.pre_time}}天</text>
					</view> -->
				</view>

				<!-- <view class="doctor-zhang">
					医师盖章：
				</view> -->
			</view>
		</view>
		
	  <view class="bottombut">
			<view class="btnxf" v-if="revise==0" @click="btnxf">续方</view>
			<button class="btnfs" v-if="revise==1"  @click="fasong">发送</button>
		</view>
		
		<u-popup class="u-popup nobgPopup" v-model="show" mode="bottom"  border-radius="16">
			<view class="anniu-box"> 
				<view class="queren" @click="qeuren">
					确认
				</view>
				<view class="quxiao" @click="quxiao">
					取消
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showadd" mode="bottom" border-radius="25" height="1216rpx" :closeable="true">
			<view style="background-color: #FFFFFF; height:1216rpx; padding: 104rpx 32rpx;">
		
				<view class="u-skeleton">
					<view class="box">
						<view class="box1">
							<view class="img">
								<image :src="yaoDetail.dr_img" mode=""></image>
							</view>
							<view class="info">
								<view class="name">
									{{yaoDetail.dr_name}}
									{{yaoDetail.dr_model}}
								</view>
								<view class="gongsi">
									{{yaoDetail.dr_brand}}
								</view>
								<view class="price">
									¥{{yaoDetail.dr_price}}
								</view>
							</view>
						</view>
						
						<view class="box2_1">
							<view class="shuliang-box">
								<view class="left">
									<image
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png"
										mode=""></image>
									<text>购买数量（盒）</text>
								</view>
								<view class="right">
									<image @click="jianNum"
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jian.png"
										mode=""></image>
									<text>{{number}}</text>
									<image @click="jiaNum(yaoDetail.dr_stock)"
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jia.png"
										mode=""></image>
								</view>
							</view>
		
		
							<view class="yongfa-box">
								<view class="left">
									<image
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png"
										mode=""></image>
									<text>药品用法</text>
								</view>
								<view class="right">
									<input type="number" v-model.trim="explain" placeholder="请输入数量"
										placeholder-style="color: #C7C3C3;font-size: 24rpx;" />
									<view class="wenben">次/
										<!-- <text v-if="riNum==1">日</text>
										<text v-if="riNum==2">周</text>
										<text v-if="riNum==3">月</text> -->
		
										<text class="shijian" :class="riNum==1?'active':''"  @click.stop="riTab(1)">每日</text>
										<text class="shijian" :class="riNum==2?'active':''"  @click.stop="riTab(2)" >每周</text>
										<text class="shijian" :class="riNum==3?'active':''"  @click.stop="riTab(3)">每月</text>
		
									</view>
		
		
									<!-- <image
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jiantou.png"
										mode=""></image> -->
								</view>
							</view>
		
							<view class="yongliang-box">
								<view class="left">
									<image
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png"
										mode=""></image>
									<text>单次用量</text>
								</view>
								<view class="right">
									<input type="digit" v-model.trim="Num2" placeholder="请输入数量"
										placeholder-style="color: #C7C3C3;font-size: 24rpx;" />
									<view class="wenben" >
										<!-- <text v-if="pianNum==1">片</text>
										<text
											v-if="pianNum==2">包</text>
											<text v-if="pianNum==3">瓶</text> -->
											<text class="shijian" :class="pianNum==1?'active':''"  @click.stop="pianTab(1)">片</text>
											<text class="shijian" :class="pianNum==2?'active':''"  @click.stop="pianTab(2)" >包</text>
											<text class="shijian" :class="pianNum==3?'active':''"  @click.stop="pianTab(3)">瓶</text>
											
											/次</view>
											
											
											
											
									<!-- <image
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jiantou.png"
										mode=""></image> -->
								</view>
							</view>
		
							<view class="banfa-box">
								<view class="left">
									<image
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png"
										mode=""></image>
									<text>使用办法</text>
								</view>
								<view class="right">
									<view class="wenben" >
										<!-- <text v-if="neiNum==1">内服</text><text
											v-if="neiNum==2">外用</text>
											<text v-if="neiNum==3">注射</text> -->
											
											<text class="shijian" :class="neiNum==1?'active':''"  @click.stop="neiTab(1)">内服</text>
											<text class="shijian" :class="neiNum==2?'active':''"  @click.stop="neiTab(2)" >外用</text>
											<text class="shijian" :class="neiNum==3?'active':''"  @click.stop="neiTab(3)">注射</text>
											
											
											</view>
									<!-- <image
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/jiantou.png"
										mode=""></image> -->
								</view>
							</view>
		                        <view class="beizhu-box">
									<image style="width: 20rpx; display: inline-block;
									height: 20rpx;"
																	src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/hua.png"
																	mode=""></image>
		                        	<view class="title">
		                        		用法用量
		                        	</view>
		                        	<textarea v-model.trim="explain" placeholder="请输入用法用量"
		                        		 />
		                        </view>
								
							<view class="beizhu-box">
								<view class="title">
									备注
								</view>
								<textarea v-model.trim="remarks" placeholder="请输入药品的备注说明"
									placeholder-style="font-size: 32rpx;" />
							</view>
		
		
						</view>
					</view>
		
					
		
					
		
					<u-mask :show="show3" @click="show3 = false" :z-index="999">
						<view class="rizhouyue">
							<view class="item">
								<view class="left">
									内服
								</view>
								<view class="right" @click="neiTab(1)">
									<image v-if="neiNum==1"
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png"
										mode=""></image>
									<image v-else
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png"
										mode=""></image>
								</view>
							</view>
							<view class="item">
								<view class="left">
									外用
								</view>
								<view class="right" @click="neiTab(2)">
									<image v-if="neiNum==2"
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png"
										mode=""></image>
									<image v-else
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png"
										mode=""></image>
								</view>
							</view>
							<view class="item">
								<view class="left">
									注射
								</view>
								<view class="right" @click="neiTab(3)">
									<image v-if="neiNum==3"
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png"
										mode=""></image>
									<image v-else
										src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</u-mask>
		
		
					<view class="btn-box"  @click="shiyong">
						<view class="btn">
							使用
						</view>
					</view>
				</view>
		
			</view>
		</u-popup>
		<!-- 编辑提示框 -->
		<u-modal v-model="bjshow" :content="content" :show-cancel-button="true" @confirm="confirm" confirm-color="#FE7600"></u-modal>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '处方详情',
				info: {},
				modify: 1, //从处方进入
				yaoList: '',
				show: false,
				revise:0,//修改状态
				bjshow:false,
				content: '修改处方后将覆盖上一份处方',
				drugs_id:'',
				leixing:2,
				showadd:false,
				yaoDetail:'',
				
				numbers:'',
				number:1,
				riNum:1,
				pianNum:1,
				show3:false,
				neiNum:1,
				explain:"",
				Num2:"",
				remarks:"",
			}
		},
		// computed:{
		// 	...mapState(['yaoList'])
		// },
		onLoad(options) {
			that = this
			let id = options.id
			that.get(id)
			console.log('that.yaolist3', that.yaoList)
		},
		onShow() {
			if (that.$store.state.yaoList.length > 0) {
				// that.yaoList=that.$store.state.yaoList.concat(that.yaoList)
				that.yaoList = that.$store.state.yaoList
			}
		},
		methods: {
			get(id) {
				uni.showLoading({
					mask: true
				});
				let postData = {
					order_sn: id
				}
				that.$postAjax1('Doctorsside_prescriptionorders_info', postData, function(data) {
					uni.hideLoading()
					that.info = data.data.data
					that.yaoList = data.data.data.drugs
					that.$store.state.yaoList = that.yaoList
					// 判断药品是否超出锁住库存加所添加的库存
					for(let key in that.yaoList ){
						for(var i=0;i<that.$store.state.yaoList.length;i++){
							if(that.$store.state.yaoList[i].drugs_id==that.yaoList[key].drugs_id){
								that.numbers=that.yaoList[key].number
								console.log('numbers',that.numbers)
							}
						}
					}
					console.log(data, '处方详情');
				})
			},
			fangda() {
				let arr = []
				arr.push(that.info.img)
				// 预览图片
				uni.previewImage({
					urls: arr,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			xiangqing(drugs_id) { //药品详情
				console.log('详情', drugs_id)
				uni.navigateTo({
					// url: "./drugDetail?yaoId=" + yaoId
					url: "drugDetail?drugs_id=" + drugs_id
				})
			},
			add() {
				uni.navigateTo({
					url: 'addDrugs?modify=' + that.modify
				})
			},
			shanchu(drugs_id){
				that.show=true
				that.drugs_id=drugs_id
			},
			qeuren(){
				console.log("确认")
				that.show=false
				for(var i=0;i<that.$store.state.yaoList.length;i++){
					if(that.$store.state.yaoList[i].drugs_id==that.drugs_id){
						that.$store.state.yaoList.splice(i,1)
					}
				}
			},
			quxiao(){
				that.show=false
			},
			btnxf(){
				if(that.info.payment_status==0){
					that.revise=1
				}else{
					uni.showToast({
						title: '用户已支付，不可修改',
						icon:'none',
						duration: 2000
					});
				}
			},
			bianji(drugs_id){
				that.drugs_id=drugs_id
				that.bjshow=true
			},
			confirm(){
				that.showadd=true
				// that.drugs_id=drugs_id
				that.editdrugs()
				
				for(var i=0;i<that.$store.state.yaoList.length;i++){
					if(that.$store.state.yaoList[i].drugs_id==that.drugs_id){
						that.explain=that.$store.state.yaoList[i].explain
						console.log('that.explain=that.$store.state.yaoList[i].explain',that.explain,that.$store.state.yaoList[i].explain)
						that.Num2=that.$store.state.yaoList[i].Num2
						that.remarks=that.$store.state.yaoList[i].remarks
						that.number=that.$store.state.yaoList[i].number
						
						that.neiNum=that.$store.state.yaoList[i].neiNum
						that.pianNum=that.$store.state.yaoList[i].pianNum
						that.riNum=that.$store.state.yaoList[i].riNum
						that.dr_model=that.$store.state.yaoList[i].dr_model
						that.dr_specifications=that.$store.state.yaoList[i].dr_specifications
						that.drugs=that.$store.state.yaoList[i].drugs
					}
				}
				// uni.navigateTo({
				// 	url:"./editDosage?yaoId="+yaoId +'&leixing=' + 2
				// })
			},
			cancel(){
				that.bjshow=false
			},
			editdrugs(){
				that.$postAjax1('Doctorsside_drugs_info',{
					drugs_id:that.drugs_id,
				},function(data){  //https://ask.suoweilai.com/Doctorsside_drugs_info  医生端-药品 - 医生端-医生药品详情
					that.yaoDetail=data.data.data
					// console.log(data.data.data,99999999999)
				})
			},
			jianNum(){
				if(that.number==1){
					return
				}
				that.number--
			},
			jiaNum(dr_stock){
				if(that.number>=dr_stock+that.numbers){
					uni.showToast({
						title: '数量超出范围~~',
						icon:'none',
						duration: 2000
					});
					
					return
				}
				that.number++
			},
			shiyong(){
				console.log('发送')
				if(that.explain==""){
					uni.showToast({
						icon:"none",
						title:"用法用量不能为空!"
					})
					return
				}
				
				var datas = [{
					drugs_id:that.drugs_id,
					drugs:that.yaoDetail.dr_name,
					dr_model:that.yaoDetail.dr_model,
					dr_specifications:that.dr_specifications,
					number:that.number,
					explain:that.explain,
					Num2:that.Num2,
					riNum:that.riNum,
					pianNum:that.pianNum,
					neiNum:that.neiNum,
					remarks:that.remarks,
				}]
				
				if(that.leixing==1){
					for(var i=0;i<that.$store.state.yaoList.length;i++){
						if(that.$store.state.yaoList[i].drugs_id==that.drugs_id){
							uni.showToast({
								icon:"none",
								title:"处方里有当前药品,不能重复添加!"
							})
							that.showadd=false
							return
						}
					}
					that.$store.state.yaoList=that.$store.state.yaoList.concat(datas)
					console.log(that.$store.state.yaoList,'leixing==1')
				}
				
				if(that.leixing==2){
					for(var i=0;i<that.$store.state.yaoList.length;i++){
						if(that.$store.state.yaoList[i].drugs_id==that.drugs_id){
							console.log('leixing==2',that.drugs_id)
					that.$store.state.yaoList.splice(i,1,datas[0])
				    
						}
					}
					console.log('leixing==2')
				}
				// const value = JSON.parse(uni.getStorageSync('yaoList'));
				// uni.setStorageSync('yaoList', JSON.stringify(datas.concat(value)));
				
				console.log(that.$store.state.yaoList,88888)
				// uni.navigateBack({
				//     delta: parseInt(that.cengNum)
				// });
				that.showadd=false
				// this.$nextTick(() => {
				// });
			},
			fasong(){
				if(that.info.pets_result == ''){
					uni.showToast({
						title: '请输入诊断结果',
						icon: 'none',
						duration: 1500
					});
					return
				}
				let boxHeight = ''
				uni.getSystemInfo({ //获取navigation返回高度 计算tab定位高度
					success(res) {
						let boxHeight1 = uni.createSelectorQuery().select(".box");
						boxHeight1.boundingClientRect(function(data) { //data - 各种参数
							console.log(data,9989)
							boxHeight=data.height
							// return
							var rps = []
							var drugs_array = []
							for(var i=0;i<that.$store.state.yaoList.length;i++){
								let item = that.$store.state.yaoList[i]
								
								let text =item.explain
								let temp = {
									drugs_id:item.drugs_id,
									drugs:item.drugs,
									number:item.number,
									explain:text,
									remarks:item.remarks,
									dr_specifications:item.dr_specifications?item.dr_specifications:'',
									dr_model:item.dr_model?item.dr_model:''
								}
								console.log(text);
								drugs_array.push(temp)
								rps.push(item.drugs_id)
							}
							if(drugs_array.length==0){
								uni.showToast({
									title: '未添加药品',
									icon: 'none',
									duration: 1500
								});
								return
							}
							console.log(drugs_array);
							console.log(rps);
							that.$postAjax1('Doctorsside_prescription',{
								order_sn:that.info.pre_number,  //当前点击的订单编号
								user_id:that.info.user_id == undefined?'':that.info.user_id,     //用户ID
								hospital_id:that.info.hospital_id == undefined ? '' : that.info.hospital_id,     //医院ID
								// inquiry_method:that.yizhuData.consultation_type,     //问诊的方式
								// pets_id:that.yizhuData.pets_id,       //宠物ID
								pets_result:that.info.pets_result,    //诊断结果
								rps:JSON.stringify(rps),//药品ID ['1,2,3,4'] 字符串格式
								drugs_array:JSON.stringify(drugs_array),            //药品详细信息
								html_height:parseInt(boxHeight),    //页面内容所有信息显示的总高度
							},function(data){  //https://ask.suoweilai.com/Doctorsside_prescription  医生端接诊 - 接诊-开处方添加数据
								// console.log(data.data.data,99999999999)
								uni.navigateBack({
									delta:1
								})
								that.$store.state.yaoList = []
							})
						}).exec()
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.box {
	.box1 {
		width: 100%;
		padding: 0 32rpx;
		background: #FFFFFF;

		.name {
			text-align: center;
			padding: 32rpx 0 14rpx;
		}

		.bianhao-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);

			.bianhao {
				font-size: 26rpx;
				font-weight: 400;
				color: #A3A3A3;
				line-height: 36rpx;
			}

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #A3A3A3;
			}
		}

		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 22rpx;

			.item {
				font-size: 28rpx;
				font-weight: 400;
				color: #959595;
				line-height: 40rpx;
				width: 60%;
				margin-bottom: 28rpx;

				text {
					margin-left: 6rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #242424;
					line-height: 36rpx;
				}

				&:nth-of-type(2n) {
					width: 40%;
				}
			}
		}
	}

	.line {
		height: 16rpx;
		width: 100%;
		background-color: #F6F6F6;
	}

	.box2 {
		padding: 0 32rpx 32rpx 32rpx;
		background: #fff;
		margin-bottom: 150rpx;
		padding-bottom: 300rpx;

		.title {
			padding: 24rpx 0 22rpx;
			// border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
			font-size: 28rpx;
			font-weight: 500;
			color: #242424;
			line-height: 40rpx;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #242424;
				line-height: 40rpx;
			}
		}

		.ti {
			padding-top: 24rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #242424;
			line-height: 40rpx;
			display: flex;
			justify-content: space-between;
		}
		
		.add {
			padding: 16rpx 36rpx;
			// background: linear-gradient(270deg, #FF9331 0%, #FE7600 100%);
			border-radius: 40rpx;
			font-size: 34rpx;
			color: #FE7600;
			border: 1px #FE7600 dashed;
			margin-top: 50rpx;
			width: 100%;
			text-align: center;
		}

		.yao-list {
			.yao-item {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				padding: 24rpx 0;
				// border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
				width: 100%;
				.left {
					width: 90%;
					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #343434;
						line-height: 36rpx;
						margin-bottom: 12rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.yongliang {
						font-size: 24rpx;
						font-weight: 400;
						color: #919398;
						line-height: 38rpx;
						margin-bottom: 12rpx;
					}
				}
				.right {
					font-size: 30rpx;
					font-weight: 400;
					color: #908d8d;
					line-height: 34rpx;
				}
			}
			.btn-box {
				text-align: right;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
				padding-bottom: 30rpx;
				.shanchu {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
					padding: 6rpx 36rpx;
					background: #CCCCCC;
					border-radius: 23rpx;
				}
				.bianji {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
					padding: 6rpx 36rpx;
					background: linear-gradient(223deg, #FF9331 0%, #FE7600 100%);
					border-radius: 23rpx;
					margin-left: 24rpx;
				}
			}
		}
		.doctor-info {
			padding-top: 26rpx;
			// border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
			.doctor-name, .time, .validity {
				font-size: 28rpx;
				font-weight: 400;
				color: #242424;
				line-height: 40rpx;
				margin-bottom: 28rpx;
				text {
					margin-left: 6rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #242424;
					line-height: 40rpx;
				}
			}
		}
		.doctor-zhang {
			padding: 66rpx 0 176rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #242424;
			line-height: 40rpx;
			text-align: center;
		}
	}
}

.bottombut {
	background-color: #FFFFFF;
	position: fixed;
	padding: 30rpx 0 50rpx 0;
	width: 100%;
	bottom: 0;
	.btnfs {
		background: #FF8F2B; 
		box-shadow: 0px 6rpx 8rpx 0px rgba(255, 143, 43, 0.2);
		border-radius: 46rpx; line-height: 84rpx;
		font-size: 32rpx;
		color: #FFFFFF; width: 80%;
	}
	.btnxf {
		width: 200rpx;
		height: 84rpx;
		background: #FF8F2B;
		box-shadow: 0px 6px 8px 0px rgba(255, 143, 43, 0.2);
		border-radius: 42rpx; 
		line-height: 84rpx;
		text-align: center; 
		float: right; 
		overflow: hidden; 
		margin-right: 40rpx; 
		color: #FFFFFF;
		font-size: 32rpx;
	}
}

.u-popup{
	.anniu-box{
		background-color: transparent;
		padding:0  22rpx 0rpx;
		// margin-bottom: 50rpx;
		padding-bottom: 50rpx;
		.queren{
			width: 100%;
			height: 106rpx;
			background: #EFEFEF;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			// color: #E02020;
			line-height: 106rpx;
			margin-bottom: 16rpx;
		}
		.quxiao{
			width: 100%;
			height: 106rpx;
			background: #EFEFEF;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 106rpx;
			// color: #2F78F3;
		}
	}
	
}
.u-skeleton{
	.box1{
		padding: 20rpx 32rpx;
		display:flex;
		.img{
			image{
				display: block;
				width: 120rpx;
				height: 132rpx;
			}
			margin-right: 12rpx;
		}
		.info{
			.name{
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 14rpx;
			}
			.gongsi{
				font-size: 24rpx;
				font-weight: 400;
				color: #939499;
				line-height: 30rpx;
				margin-bottom: 14rpx;
			}
			.price{
				font-size: 28rpx;
				font-weight: 400;
				color: #DC1B31;
				line-height: 26rpx;
			}
		}
	}
	.kong{
		width: 100%;
		height: 12rpx;
		background: #F6F6F6;
	}
	.box2_1{
		.shuliang-box{
			padding: 24rpx 32rpx;
			border-bottom: 2rpx solid rgba(0,0,0,0.08);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				image{
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
				text{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					vertical-align: middle;
				}
			}
			.right{
				image{
					display: inline-block;
					width: 56rpx;
					height: 56rpx;
					vertical-align: middle;
				}
				text{
					font-size: 28rpx;
					font-weight: 400;
					color: #343434;
					line-height: 40rpx;
					padding: 0 30rpx;
					vertical-align: middle;
				}
			}
		}
		.yongfa-box,.yongliang-box,.banfa-box{
			padding: 24rpx 0rpx 24rpx 32rpx;
			border-bottom: 2rpx solid rgba(0,0,0,0.08);
			display: flex;
			justify-content: space-between;
			align-items: center;
			display: none;
			.left{
				image{
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					vertical-align: middle;
					// margin-right: 20rpx;
				}
				text{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					vertical-align: middle;
				}
			}
			.right{
				input {
					width: 120rpx;
					height: 42rpx;
					// border-radius: 4rpx;
					// border: 2rpx solid rgba(0, 0, 0, 0.08);
					// padding-left: 18rpx;
					box-sizing: border-box;
					vertical-align: middle;
					display: inline-block;
				
					font-size: 24rpx;
					font-weight: 400;
					color: #333;
				}
				.wenben{
					display: inline-block;
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 40rpx;
					padding: 0 6rpx 0 12rpx ;
					vertical-align: middle;
					.shijian{
						padding:6rpx 20rpx ;
						border: 2rpx solid #DCDCDC;
						border-radius: 12rpx;margin: 0 4rpx;
						font-size: 26rpx;
						color: #909090;
					}
					.active{
						color: #FFFFFF;
						background: -webkit-linear-gradient( #FFC347 ,#FF9331 );
					}
				}
				image{
					display: inline-block;
					width: 14rpx;
					height: 20rpx;
					vertical-align: middle;
				}
			}
		}
	
		.beizhu-box {
			padding: 0 32rpx;
		
			.title {
				padding: 28rpx 0 20rpx 10rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				display: inline-block;
			}
			textarea {
				width: 100%;
				box-sizing: border-box;
				height: 124rpx;
				// border-radius: 12rpx;
				// border: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-weight: 400;
				padding: 24rpx 28rpx;
				line-height: 36rpx;
				color: #959595;
			}
			
		}
	}
	.rizhouyue{
		width: 376rpx;
		height: 284rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		position: absolute;
		top: 418rpx;
		left: 212rpx;
		// z-index: 9999;
		.item{
			padding: 26rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid rgba(0,0,0,0.08);
			&:nth-last-of-type(1){
				border: none;
			}
			.left{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				vertical-align: middle;
			}
			.right{
				image{
					display: inline-block;
					width: 34rpx;
					height: 34rpx;
					vertical-align: middle;
				}
			}
		}
	}
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 32rpx 100rpx;
		.btn {
			width: 100%;
			height: 98rpx;
			background: linear-gradient(219deg, #FF9331 0%, #FE7600 100%);
			border-radius: 8rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
			text-align: center;
		}
	}
}

</style>
